<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom增删改</title>
</head>
<body>
    <div id="total">
        <dov class="inner">
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>成都</li>
                <li>深圳</li>
            </ul>
        </dov>
    </div> 
    <div id="btnList">
        <div><button id="btn01">创建一个“ 广州 ”节点，添加到 #city下</button></div>
        <div><button id="btn02">将 “ 广州 ” 节点插入到#bj前面</button></div>
        <div><button id="btn03">使用“广州” 节点替换 #bj节点</button></div>
        <div><button id="btn04">删除 #bj节点</button></div>
        <div><button id="btn05">读取#city 内的HTML 代码</button></div>
        <div><button id="btn06">设置 #bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个“ 广州 ”节点，添加到 #city下</button></div>
    </div>
</body>
</html>
<script>

    // 创建一个构造函数
    function myClick(idStr,fun){
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
    }

    // 1.创建一个“ 广州 ”节点，添加到 #city下
    myClick("btn01",function(){

        // 创建广州节点 <li> 广州 </li>
        // 创建 li 元素节点
        /*
            document.createElement()
                可以用于创建一个元素节点对象，
                他需要一个标签名作为参数
        */
        var li = document.createElement("li");

        // 创建 广州 文本节点

        /*
            document.createTextNode()
                可以用来创建一个文本节点对象
                需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
        */
        var gztext = document.createTextNode("广州");

        // 将gztext设置为 li 的子节点 
        /*
            appendChild()
                - 向一个父节点中添加一个新的子节点
                - 用法：  父节点.appendChild(子节点)  ⭐
        */
        li.appendChild(gztext);

        // 先获取到city  再将 广州添加到 city下⭐
        // 获取id 为 city 的节点
        var city = document.getElementById("city"); 
        // 将 广州添加到 city下
        city.appendChild(li)

    });

    // 2.将“ 广州 ”节点插入到  #bj 前面
    myClick("btn02",function(){
        // 创建一个广州节点
        var li = document.createElement("li");

        // 创建一个广州 文本节点
        var gztext = document.createTextNode("广州");

        // 将 广州文本节点 添加到 广州节点中
        li.appendChild(gztext);

        // 获取id 为 bj 的节点
        var bj = document.getElementById("bj");

        /*
            insertBefore 
                - 可以在指定的 "子"节点 前， 插入 新的"子"节点
                - 语法：
                      父节点.insertBefore(新的子节点，旧的子节点)  ⭐
        */

        // 获取bj 的父节点
        var city = document.getElementById("city");
        // 将 li节点 插入到 bj节点前
        city.insertBefore(li,bj);
    });

    // 3.使用 "广州"节点 替换 #bj 节点
    myClick("btn03",function(){
        // 创建一个广州节点
        var li = document.createElement("li");
        // 创建一个广州 文本节点
        var gztext = document.createTextNode("广州");
        // 将 广州文本节点 添加到 广州节点中
        li.appendChild(gztext);

        // 获取id 为 bj 的节点
        var bj = document.getElementById("bj");

        /*
            replaceChild()
                - 可以使用指定的子节点 替换 已有的子节点
                - 语法：
                        父节点.replaChild(新的子节点，旧的子节点)  ⭐
                        
        */

        // 获取bj 的父节点
        var city = document.getElementById("city");
        // 将 bj节点 切换为 li节点
        city.replaceChild(li,bj);
    });

    // 4.删除 #bj节点
    myClick("btn04",function(){
        // 获取 id为 bj 的节点
        var bj = document.getElementById("bj");

        // 获取 bj节点 的父节点
        var city = document.getElementById("city");

        // 删除 city节点下的子节点 bj
        /*
            removeChild()
                - 可以删除一个子节点
                - 语法：
                        父节点.removeChild(子节点) ⭐    他杀 (请父亲打自己)
            方法二: 
                    子节点.parentNode.removeChild(子节点) 自杀 (自己打自己)
                    bj.parentNode.removeChild(bj);
        */
        city.removeChild(bj);

        /* 
            bj.parentNode 用于获取bj的父节点，可以省去获取父节点，
                或不知晓父节点时，也可使用此方法 （且更精确）
        */
        bj.parentNode.removeChild(bj);

    });

    // 5.读取 #city 内的 HTML 代码
    myClick("btn05",function(){
        // 获取 id为 city的节点
        var city = document.getElementById("city");

        // 读取 city 内的 HTML 代码 
        alert(city.innerHTML);
    });

    // 6.设置 #bj 内的 HTML 代码
    myClick("btn06",function(){
        // 获取id 为bj 的节点
        var bj = document.getElementById("bj");
        bj.innerHTML = "郑州";
    });

    // 7.创建一个"广州" 节点,添加到 #city 下  💚自研练习
    myClick("btn07",function(){
        // 创建一个 li元素节点
        var li = document.createElement("li");

        // 创建一个 广州 文本节点
        var gztext = document.createTextNode("广州");

        li.appendChild(gztext);

        var city = document.getElementById("city");

        city.innerHTML += li.innerHTML; // 不完善 只显示文本，不显示标签

    });

    //    ⭐课程方法
    // 7.创建一个"广州" 节点,添加到 #city 下
    myClick("btn07",function(){
        // 获取 id为 city的节点
        var city = document.getElementById("city");

        // 向 city节点添加元素：<li>广州</li>
        /*
            使用 innerHTML 也可以完成 DOM 的增删改的相关操作，
                - 但会影响整个节点，会影响其他子节点原本的响应事件
            一般我们会两种方式结合使用  方法如下 ↓ ↓
        */
        // city.innerHTML += "<li>广州</li>";
        
        // 两种结合使用 
        // 创建一个 li
        var li = document.createElement("li");

        // 向 li 中设置文本
        li.innerHTML="广州";

        // 将添加到 city 中
        city.appendChild(li);

    });
    
    
</script>